<template>
    <div>
      <el-button type="primary" @click="showAddModal">新增菜单</el-button>
      <el-table :data="menus" style="width: 100%">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="菜单名称"></el-table-column>
        <el-table-column prop="name" label="菜单路径"></el-table-column>
        <el-table-column prop="name" label="父级菜单"></el-table-column>
        <el-table-column prop="name" label="创建时间"></el-table-column>
        <el-table-column prop="name" label="状态"></el-table-column>
        <el-table-column prop="name" label="菜单名称"></el-table-column>
        <el-table-column prop="name" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="showEditModal(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteMenu(scope.row.id)">删除</el-button>
            <el-button type="text" @click="viewMenu(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-dialog title="新增菜单" :visible.sync="showAdd">
        <el-input v-model="newMenuName" placeholder="菜单名称"></el-input>
        <el-button type="primary" @click="addMenu">确认新增</el-button>
        <el-button @click="hideAddModal">取消</el-button>
      </el-dialog>
  
      <el-dialog title="修改菜单" :visible.sync="showEdit">
        <el-input v-model="editMenuName" :value="selectedMenu.name"></el-input>
        <el-button type="primary" @click="updateMenu">确认修改</el-button>
        <el-button @click="hideEditModal">取消</el-button>
      </el-dialog>
  
      <el-dialog title="菜单详情" :visible.sync="showView">
        <p>菜单名称: {{ selectedMenu.name }}</p>
        <el-button @click="hideViewModal">关闭</el-button>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        menus: [
          { id: 1, name: "菜单1" },
          { id: 2, name: "菜单2" },
          { id: 3, name: "菜单3" },
        ],
        showAdd: false,
        showEdit: false,
        showView: false,
        newMenuName: "",
        editMenuName: "",
        selectedMenu: {},
      };
    },
    methods: {
      showAddModal() {
        this.showAdd = true;
      },
      hideAddModal() {
        this.showAdd = false;
        this.newMenuName = "";
      },
      addMenu() {
        const newId = this.menus.length + 1;
        this.menus.push({ id: newId, name: this.newMenuName });
        this.hideAddModal();
      },
      showEditModal(menu) {
        this.showEdit = true;
        this.selectedMenu = menu;
        this.editMenuName = menu.name;
      },
      hideEditModal() {
        this.showEdit = false;
        this.selectedMenu = {};
        this.editMenuName = "";
      },
      updateMenu() {
        this.selectedMenu.name = this.editMenuName;
        this.hideEditModal();
      },
      deleteMenu(id) {
        this.menus = this.menus.filter((menu) => menu.id !== id);
      },
      viewMenu(menu) {
        this.showView = true;
        this.selectedMenu = menu;
      },
      hideViewModal() {
        this.showView = false;
        this.selectedMenu = {};
      },
    },
  };
  </script>
  